<script setup>
import { reactive, ref, defineProps, watch } from "vue";

const props = defineProps(["tagGraph"]);
let textModel = ref({
  textType: "manual",
  text: "",
  dynamicTextContent: "",
  dynamicTextNumber: 0,
  dynamicTextIncrement: 1,
  textPrefix: "",
  textSuffix: ""
});
const options = [
  {
    label: "手动输入",
    value: "manual"
  },
  {
    label: "序列号",
    value: "sequence"
  }
];
// 监听tagGraph的变化
watch(
  () => props.tagGraph,
  newVal => {
    if (newVal) {
      const activeObject = newVal.getActiveObject();
      if (activeObject) {
        textModel.value.textType = activeObject.textType;
        textModel.value.text = activeObject.text;
        textModel.value.dynamicTextContent = activeObject.dynamicTextContent;
        textModel.value.textPrefix = activeObject.textPrefix || "";
        textModel.value.textSuffix = activeObject.textSuffix || "";
        textModel.value.dynamicTextIncrement =
          activeObject.dynamicTextIncrement;
        textModel.value.dynamicTextNumber = activeObject.dynamicTextNumber;
        // 监听文本内容的变化

        activeObject.on("changed", () => {
          textModel.value.text = activeObject.text;
          textModel.value.textPrefix = activeObject.textPrefix;
          textModel.value.textSuffix = activeObject.textSuffix;
          textModel.value.dynamicTextIncrement =
            activeObject.dynamicTextIncrement;
          textModel.value.dynamicTextNumber = activeObject.dynamicTextNumber;
        });
        activeObject.on("scaling", e => {
          const scaleY = activeObject.scaleY;
          activeObject.set({
            height: activeObject.height * scaleY,
            scaleY: 1
          });
          activeObject.set({
            scaleX: 1
          });
          activeObject.setCoords();
        });
      }
    }
  },
  {
    immediate: true
  }
);

const handleChangeTextValue = ({
  textType,
  textPrefix,
  textSuffix,
  text,
  dynamicTextContent,
  dynamicTextIncrement,
  dynamicTextNumber
}) => {
  const activeObject = props.tagGraph.getActiveObject();
  if (!dynamicTextContent) {
    textModel.value.dynamicTextContent = text;
    dynamicTextContent = text;
  }

  if (activeObject) {
    activeObject.textType = textType;
    activeObject.dynamicTextContent = dynamicTextContent || text;
    activeObject.dynamicTextIncrement = dynamicTextIncrement;
    activeObject.dynamicTextNumber = dynamicTextNumber;
    activeObject.textPrefix = textPrefix;
    activeObject.textSuffix = textSuffix;
    if (activeObject.textType == "sequence") {
      textModel.value.text = textPrefix + dynamicTextContent + textSuffix;
      activeObject.text = textModel.value.text;
    } else {
      activeObject.text = text;
    }
    props.tagGraph.saveState();
    props.tagGraph.canvas.renderAll();
  }
};
</script>

<template>
  <div>
    <el-form label-position="top">
      <el-form-item label="数据类型">
        <el-select
          v-model="textModel.textType"
          style="width: 100%"
          @change="handleChangeTextValue(textModel)"
        >
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="textModel.textType == 'manual'" label="当前内容">
        <el-input
          v-model="textModel.text"
          type="textarea"
          @input="handleChangeTextValue(textModel)"
        />
      </el-form-item>
      <div v-else>
        <el-form-item label="当前内容">
          <el-input
            v-model="textModel.dynamicTextContent"
            type="textarea"
            @input="handleChangeTextValue(textModel)"
          />
        </el-form-item>
        <el-form-item label="前缀">
          <el-input
            v-model="textModel.textPrefix"
            @input="handleChangeTextValue(textModel)"
          />
        </el-form-item>
        <el-form-item label="后缀">
          <el-input
            v-model="textModel.textSuffix"
            @input="handleChangeTextValue(textModel)"
          />
        </el-form-item>
        <el-form-item label="变化量">
          <el-input-number
            v-model="textModel.dynamicTextIncrement"
            style="width: 100%"
            @change="handleChangeTextValue(textModel)"
          />
        </el-form-item>
        <el-form-item label="打印序列号个数">
          <el-input-number
            v-model="textModel.dynamicTextNumber"
            style="width: 100%"
            @change="handleChangeTextValue(textModel)"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
